<template>
  <div>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column align="center" prop="class" label="分类" width="180" />
      <el-table-column align="center" prop="rate" label="评价">
        <template #default="scope">
          <el-rate
            v-if="scope.row.class !== '综合评价'"
            v-model="rateData[scope.row.prop]"
            :disabled="onlyRead"
            show-score
            text-color="#ff9900"
          />
          <!-- -->
          <el-radio-group v-model="rateData[scope.row.prop]" :disabled="onlyRead" v-else>
            <el-radio :value="1" size="large">非常差</el-radio>
            <el-radio :value="2" size="large">较差</el-radio>
            <el-radio :value="3" size="large">一般</el-radio>
            <el-radio :value="4" size="large">较好</el-radio>
            <el-radio :value="5" size="large">非常好</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
    </el-table>

    <div class="card-title"></div>

    <div
      style="
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 18px;
        color: #333333;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      "
    >
      <span class="short_blue_line" style="margin-right: 10px; height: 22px"></span
      >您对此次活动的评价
    </div>

    <el-input
      v-model="rateData.commentContent"
      v-if="!onlyRead"
      :autosize="{ minRows: 5, maxRows: 5 }"
      type="textarea"
      placeholder="请输入内容"
    />
    <div v-else class="comment_content">
      {{ rateData.commentContent }}
    </div>
    <div class="footer-form" v-if="!onlyRead">
      <el-button class="cancel_btn" @click="emit('cancelEvent')"> 返回 </el-button>
      <el-button type="primary" class="submit_btn" @click="submitComment()"
        >提交</el-button
      >
    </div>
    <div class="footer-form" v-if="isCheck">
      <div>
        <el-button class="cancel_btn" @click="emit('cancelEvent')"> 返回 </el-button>
        <el-button type="danger" class="submit_btn" @click="addPassInfo(2)"
          >审批不通过</el-button
        >
        <el-button type="primary" class="submit_btn" @click="addPassInfo(1)"
          >审批通过</el-button
        >
      </div>
    </div>
    <div class="footer-form" v-if="!isCheck && onlyRead">
      <div>
        <el-button class="cancel_btn" @click="emit('cancelEvent')"> 返回 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs, watch } from "vue";
const props = defineProps({
  rateData: {
    type: Object,
    default: {
      practicability: 0,
      environmentalFacility: 0,
      teamworkExperience: 0,
      harvestGrowth: 0,
      comprehensive: 0,
      commentContent: "",
    },
    // required: true,
  },
  onlyRead: {
    type: Boolean,
    default: false,
  },
  isCheck: {
    type: Boolean,
    default: false,
  },
});
const { rateData } = toRefs(props);
const emit = defineEmits(["cancelEvent", "submitEvent", "addPassInfo"]);
const tableData = ref([
  { class: "实习内容实用性", prop: "practicability" },
  { class: "实习环境与设施", prop: "environmentalFacility" },
  { class: "团队合作体验", prop: "teamworkExperience" },
  { class: "个人收获与成长", prop: "harvestGrowth" },
  { class: "综合评价", prop: "comprehensive" },
]);
//将传过来的值通过toRefs转换为响应式数据
//实时监听rateData的变化，更新tableData中的rate值
// watch(
//   () => toRefs(props.rateData),
//   (newVal) => {
//     tableData.forEach((item) => {
//       item.rate = newVal[item.prop];
//     });
//   },
//   { deep: true, immediate: true }
// );

// onMounted(() => {
//   // let temp = toRefs(props.rateData)
//   // console.log("temp", temp);

//   console.log("rateData", rateData.value);
//   tableData.value.forEach((item) => {
//     item.rate = rateData.value[item.prop];
//   });
// });
const submitComment = () => {
  // tableData.value.forEach((item) => {
  //   rateData.value[item.prop] = item.rate;
  // });
  // console.log(1111);
  //   emit("submitEvent");
  // };
  // 判断rateData打分是否为空
  if (Object.values(props.rateData).some((item) => item === 0)) {
    ElNotification({
      message: "请完成所有打分",
      type: "warning",
    });
    console.log(2222);
  } else {
    console.log(3333);

    emit("submitEvent");
  }
};

const addPassInfo = (type) => {
  emit("addPassInfo", type);
};
</script>

<style lang="scss" scoped>
.card-title {
  font-weight: bold;
  font-size: 18px;
  color: #3f3f3f;
  margin: 20px 0;
}
.comment_content {
  color: #707070;
  margin-bottom: 30px;
  font-size: 14px;
  // padding: 0px 20px;
}
:deep(.el-radio__input.is-disabled + span.el-radio__label) {
  color: #6e6e6e;
}
:deep(.el-radio__input.is-checked + span.el-radio__label) {
  color: rgb(64, 158, 255);
}
:deep(.el-radio-group) {
  .is-disabled {
    opacity: 1;
    .is-checked {
      .el-radio__inner {
        background-color: rgb(64, 158, 255);
        border: rgb(64, 158, 255);
      }
    }
  }
}
</style>
